export default {
    data() {
        return {
            // 添加用户弹出框
            dialogAddUserVisible: false,
            // 修改用户弹出框
            dialogUpdateVisible: false,
            // 分配角色弹出框
            dialogRllotVisible: false,
            // 请求数据参数
            queryInfo: {
                query: "",
                pagenum: 1,
                pagesize: 5
            },
            // 总数据
            total: 0,
            //   用户列表数据
            usersList: [],
            // 添加用户数据表单数据
            addUserForm: {
                username: '',
                password: '',
                email: '',
                mobile: ''
            },
            // 修改用户数据表单
            updateUserForm: {
                username: '',
                email: '',
                mobile: ''
            },
            // 修改时需要用到的id
            userId: '',
            // 分配权限用户数据
            allotRoleForm: {
                id: '',
                username: '',
                role_name: ''
            },
            // 角色数据
            rolesList: [],
            roleId: '',
            // 表单校验规则
            rules: {
                username: [{
                    required: true,
                    message: '请输入用户名',
                    trigger: 'blur'
                }],
                password: [{
                    required: true,
                    message: '请输入密码',
                    trigger: 'blur'
                }],
                email: [{
                        required: true,
                        message: '请输入邮箱地址',
                        trigger: 'blur'
                    },
                    {
                        type: 'email',
                        message: '请输入正确的邮箱地址',
                        trigger: ['blur', 'change']
                    }
                ],
                mobile: [{
                        required: true,
                        message: '请输入手机号',
                        trigger: 'blur'
                    },
                    {
                        pattern: /^[1-9]\d*$/,
                        message: '请输入正确的手机号',
                        trigger: 'change'
                    }
                ]
            }
        };
    },
    created() {
        this.getUsersList();
    },
    methods: {
        async getUsersList() {
            let {
                data: res
            } = await this.$http.get("users", {
                params: this.queryInfo
            });
            // console.log(res);
            if (res.meta.status != 200)
                return this.$message.error("获取用户数据失败");
            // 传入总数据
            this.total = res.data.total;
            this.usersList = res.data.users;
        },
        // 添加用户
        addUser() {
            this.$refs.addUserForm.validate(async valid => {
                if (!valid) return;
                let {
                    data: res
                } = await this.$http.post('users', this.addUserForm);
                // console.log(res)
                if (res.meta.status != 201) return this.$message.error(res.meta.msg);
                this.getUsersList();
                this.dialogAddUserVisible = false;
                this.$message.success('添加用户成功');
                // 清空表单数据
                this.$refs.addUserForm.resetFields();
            })
        },
        // 切换状态
        async stateCut(row) {
            let {
                data: res
            } = await this.$http.put('users/' + row.id + '/state/' + row.mg_state)
            // console.log(res)
            if (res.meta.status != 200) return this.$message.error(res.meta.msg);
            this.getUsersList();
            this.$message.success(res.meta.msg);
        },
        // 根据 ID 查询用户信息
        async searchUSer(id) {
            // 暂存id
            this.userId = id
            this.dialogUpdateVisible = true;
            let {
                data: res
            } = await this.$http.get('users/' + id);
            // console.log(res)
            if (res.meta.status != 200) return this.$message.error('获取用户信息失败');
            this.updateUserForm = res.data;
        },
        // 编辑用户提交
        updateUser() {
            this.$refs.updateUserForm.validate(async valid => {
                if (!valid) return;
                let {
                    data: res
                } = await this.$http.put('users/' + this.userId, this.updateUserForm);
                // console.log(res)
                if (res.meta.status != 200) return this.$message.error('更新用户数据失败');
                this.$message.success('更新用户成功');
                this.dialogUpdateVisible = false;
                this.getUsersList();
            })
        },
        // 删除用户
        deleteUser(id) {
            this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.delete('users/' + id).then(() => {
                    this.getUsersList();
                })
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 获取角色
        async getRole(row) {
            this.dialogRllotVisible = true;
            this.allotRoleForm = row;
            // 查询角色数据
            let {
                data: res
            } = await this.$http.get('roles');
            // console.log(res);
            this.rolesList = res.data;
        },
        // 分配角色
        async allotRole() {
            let {
                data: res
            } = await this.$http.put('users/' + this.allotRoleForm.id + '/role', {
                rid: this.roleId
            });
            // console.log(res)
            if (res.meta.status != 200) return this.$message.error('分配角色失败');
            this.dialogRllotVisible = false;
            this.getUsersList();
            this.$message.success('分配角色成功');
        },
        // 分页方法
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.queryInfo.pagesize = val;
            this.getUsersList();
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.queryInfo.pagenum = val;
            this.getUsersList();
        }
    }
};